<!--
 * @Author: 330GRX 617947173@qq.com
 * @Date: 2023-09-27 11:12:58
 * @LastEditors: 330GRX 617947173@qq.com
 * @LastEditTime: 2023-10-02 12:07:30
 * @FilePath: \Realtime-Chat\web\src\views\Chat.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="container">
    <button class="logout-btn" @click="handleLogout">退出</button>
    <div class="chat-container">
      <Contacts :contacts="contacts" />
      <Message :socket="socket" v-if="currentChatStore.currentChat" />
      <Welcome v-else />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref, watchEffect, onBeforeUnmount } from 'vue'
import { allUsersRoute, host } from '@/utils/APIRoutes'
import { useCurrentChatStore, useCurrentUserStore } from '@/stores/index'
import { io } from 'socket.io-client'
import Contacts from '@/components/Contacts.vue'
import Welcome from '@/components/Welcome.vue'
import Message from '@/components/Message.vue'
import axios from 'axios'
// 路由实例对象
const router = useRouter()
// 会话列表
const contacts = ref([])
// 当前用户
const currentUserStore = useCurrentUserStore()
// 当前会话的用户
const currentChatStore = useCurrentChatStore()
// socket对象
const socket = ref({
  current: null
})

// watchEffect 也是一个帧听器，是一个副作用函数。
// 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
// 这里监听到currentUserStore.currentUser改变
const stop = watchEffect(() => {
  if (currentUserStore.currentUser) {
    socket.value.current = io(host)
    socket.value.current.emit('add-user', currentUserStore.currentUser._id)
  }
}, [currentUserStore.currentUser])
onBeforeUnmount(() => {
  // 停止监听
  stop()
})
onMounted(async () => {
  // 用户未登录，跳转至登录页面
  if (!localStorage.getItem('chat-app-user')) {
    return router.push('/login')
  }
  // 用户未设置头像，跳转至设置头像页面
  const currentUserValue = await JSON.parse(localStorage.getItem('chat-app-user'))
  if (!currentUserValue.isAvatarImageSet) {
    return router.push('/setAvatar')
  }
  currentUserStore.setCurrentUser(currentUserValue)
  // 获取会话列表
  const { data } = await axios.get(`${allUsersRoute}/${currentUserStore.currentUser._id}`)
  contacts.value = data
})

/**
 * @description: 处理点击退出
 */
const handleLogout = () => {
  localStorage.removeItem('chat-app-user')
  currentUserStore.setCurrentUser(null)
  currentChatStore.setCurrentChat(null)
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #131324;
  .logout-btn {
    position: absolute;
    top: 1rem;
    right: 0rem;
    background-color: rgb(56, 72, 93);
    color: white;
    margin: 0 2rem;
    padding: 0.5rem 1rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.4rem;
    font-size: 1rem;
    transition: 0.5s ease-in-out;
    &:hover {
      background-color: rgb(100, 182, 135);
    }
  }
  .chat-container {
    height: 85vh;
    width: 85vw;
    border-radius: 1rem;
    background-color: #00000076;
    display: grid;
    grid-template-columns: 25% 75%;
    @media screen and (min-width: 720px) and (max-width: 1080px) {
      grid-template-columns: 35% 65%;
    }
  }
}
</style>
